import React from 'react';
import { Modal } from 'ywen-mobile-ui';
import PropTypes from 'prop-types';
import BaseComponent from '../common//baseComponent.js';
import warnIcon from '../../../assets/images/icon/warn.png';

class LogoutAlert extends BaseComponent {
  static propTypes = {
    confirmFunc: PropTypes.func.isRequired,
    title: PropTypes.string,
  }

  static defaultProps = {
    title: '确定退出吗？',
  }

  state = {
    show: false,
  }

  show = () => {
    this.setState({ show: true });
  }

  close = () => {
    this.setState({ show: false });
  }

  render() {
    const { show } = this.state;
    if (!show) {
      return null;
    }
    const { confirmFunc, title } = this.props;
    return (
      <Modal className="alert-logout">
        <div className="content">
          <img src={warnIcon} alt="" className="icon" />
          <div className="title">{title}</div>
          <div className="btn-row">
            <div className="action-btn cancel" onClick={this.close}><div>取消</div></div>
            <div className="action-btn" onClick={confirmFunc}><div>确定</div></div>
          </div>
        </div>
      </Modal>
    );
  }
}

export default LogoutAlert;
